@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

package/src/css/components/tree/tree.style.ts

@@ -1,39 +0,0 @@
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const component: StyleRules = {
-  '.tree-item': {
-    nest: {
-      '&[role="none"] > [role="treeitem"]': {
-        outline: 'none',
-        cursor: 'default',
-        borderRadius: '3px',
-
-        backgroundColor: vars.color.bg,
-        color: vars.color.fg,
-      },
-
-      '&[role="none"] > [role="treeitem"]:focus': {
-        position: 'relative',
-      },
-
-      '&[role="treeitem"]': {
-        outline: 'none',
-      },
-
-      '&[role="treeitem"] > div': {
-        cursor: 'default',
-        borderRadius: '3px',
-
-        backgroundColor: vars.color.bg,
-        color: vars.color.fg,
-      },
-
-      '&[role="treeitem"]:focus > div': {
-        position: 'relative',
-      },
-    },
-  },
-}
-
-export const treeStyle: Style = {layers: {component}}

package/src/css/prefix/constants.ts

@@ -1,6 +0,0 @@
-import {version} from '../../../package.json'
-import {_hash} from '../_hash'
-import type {Prefix} from './types'
-
-/** @public */
-export const PREFIX: Prefix = `s${_hash(version).slice(0, 5)}-`

package/src/css/prefix/index.ts

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

package/src/css/prefix/types.ts

@@ -1 +0,0 @@
-export type Prefix = `s${string}-`

package/src/css/primitives/_arrow/_arrow.style.ts

@@ -1,69 +0,0 @@
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.arrow': {
-    position: 'absolute',
-    width: vars.arrow.size,
-    height: vars.arrow.size,
-
-    nest: {
-      ':empty + &': {
-        display: 'none',
-      },
-
-      '& > svg': {
-        display: 'block',
-        transformOrigin: `calc(${vars.arrow.size} / 2) calc(${vars.arrow.size} / 2)`,
-      },
-
-      // top
-      '[data-placement^="top"] > &': {
-        bottom: `calc(0px - ${vars.arrow.size})`,
-      },
-      '[data-placement^="top"] > & svg': {
-        transform: 'rotate(0deg)',
-      },
-
-      // right
-      '[data-placement^="right"] > &': {
-        left: `calc(0px - ${vars.arrow.size})`,
-      },
-      '[data-placement^="right"] > & svg': {
-        transform: 'rotate(90deg)',
-      },
-
-      // left
-      '[data-placement^="left"] > &': {
-        right: `calc(0px - ${vars.arrow.size})`,
-      },
-      '[data-placement^="left"] > & svg': {
-        transform: 'rotate(-90deg)',
-      },
-
-      // bottom
-      '[data-placement^="bottom"] > &': {
-        top: `calc(0px - ${vars.arrow.size})`,
-      },
-      '[data-placement^="bottom"] > & svg': {
-        transform: 'rotate(180deg)',
-      },
-    },
-  },
-
-  '.arrow-stroke-mask': {
-    // @ts-expect-error `y` is not a valid property in 'csstype'
-    y: vars.shadow.outline,
-  },
-
-  '.arrow-stroke': {
-    stroke: vars.color.shadow.outline,
-    strokeWidth: `calc(${vars.card.shadow.outline} * 2)`,
-  },
-
-  '.arrow-shape': {
-    fill: vars.color.bg,
-  },
-}
-
-export const _arrowStyle: Style = {layers: {primitive}}

package/src/css/primitives/_input/_input.style.ts

@@ -1,235 +0,0 @@
-import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {varNames, vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.input': {
-    position: 'relative',
-  },
-
-  '.input-element': {
-    WebkitFontSmoothing: 'inherit',
-    appearance: 'none',
-    border: 0,
-    outline: 'none',
-    margin: 0,
-    fontFamily: vars.font.text.family,
-    fontSize: vars.input.fontSize,
-    lineHeight: vars.input.lineHeight,
-    letterSpacing: vars.input.letterSpacing,
-    backgroundColor: 'transparent',
-    color: vars.color.input.text.fg,
-    padding: [
-      `calc(${vars.input.padding} - ${vars.input.ascenderHeight})`,
-      vars.input.padding,
-      `calc(${vars.input.padding} - ${vars.input.descenderHeight})`,
-      vars.input.padding,
-    ].join(' '),
-    borderRadius: 'inherit',
-    position: 'relative',
-    zIndex: 1,
-    display: 'block',
-    boxSizing: 'border-box',
-    resize: 'none',
-    // @ts-expect-error - TODO: fix this
-    width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-
-    nest: {
-      '&::placeholder': {
-        color: vars.color.input.text.placeholder,
-        opacity: 1,
-      },
-
-      '.input[data-icon-left] &': {
-        paddingLeft: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`,
-      },
-
-      '.input[data-icon-right] &': {
-        paddingRight: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`,
-      },
-
-      '.input:not([data-invalid]) &': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[2],
-          [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[4],
-        },
-      },
-
-      '.input:not([data-invalid]) &:hover': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0],
-        },
-      },
-
-      '.input:not([data-invalid]) &:focus': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0],
-        },
-      },
-
-      '.input:not([data-invalid]) &:disabled': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.default.border[4],
-          [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[1],
-        },
-      },
-
-      '.input[data-invalid] &': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[2],
-          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
-        },
-      },
-
-      '.input[data-invalid] &:hover': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
-        },
-      },
-
-      '.input[data-invalid] &:focus': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
-        },
-      },
-
-      '.input[data-invalid] &:disabled': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.border[4],
-          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
-        },
-      },
-    },
-  },
-
-  '.input-presentation': {
-    backgroundColor: vars.color.input.text.bg,
-    borderRadius: 'inherit',
-    boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: 'block',
-    pointerEvents: 'none',
-    zIndex: 0,
-
-    nest: {
-      '.input[data-prefix] &': {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-      },
-
-      '.input[data-suffix] &': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-      },
-
-      // focus ring
-      '.input .input-element:not([data-no-focus-ring]):focus + &': {
-        outlineWidth: vars.input.text.focusRing.width,
-        outlineStyle: 'solid',
-        outlineColor: vars.color.focusRing,
-        outlineOffset: vars.input.text.focusRing.offset,
-      },
-
-      // valid
-
-      '.input:not([data-invalid]) &': {
-        vars: {
-          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[0],
-          [varNames.color.input.text.border]: vars.color.tinted.default.border[1],
-        },
-      },
-
-      '.input:not([data-invalid])[data-read-only] .input-element + &': {
-        vars: {
-          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1],
-        },
-      },
-
-      '.input:not([data-invalid]):not([data-read-only]) .input-element:not(:disabled):hover + &': {
-        vars: {
-          [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
-        },
-      },
-
-      '.input:not([data-invalid]) .input-element:focus + &': {
-        vars: {
-          [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
-          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1],
-        },
-      },
-
-      '.input:not([data-invalid]) .input-element:disabled + &': {
-        vars: {
-          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1],
-          [varNames.color.input.text.border]: vars.color.tinted.default.border[0],
-          [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
-        },
-      },
-
-      // invalid
-
-      '.input[data-invalid] &': {
-        vars: {
-          [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
-          [varNames.color.input.text.border]: vars.color.tinted.critical.border[1],
-          [varNames.color.muted.fg]: vars.color.tinted.critical.fg[4],
-        },
-      },
-
-      '.input[data-invalid] .input-element:not(:disabled):hover + &': {
-        vars: {
-          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
-        },
-      },
-
-      '.input[data-invalid] .input-element:focus + &': {
-        vars: {
-          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
-        },
-      },
-
-      '.input[data-invalid] .input-element:disabled + &': {
-        vars: {
-          [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
-          [varNames.color.input.text.border]: vars.color.tinted.critical.border[0],
-        },
-      },
-
-      '.input:not(.input-b) &': {
-        [varNames.color.input.text.border]: 'transparent',
-      },
-    },
-  },
-}
-
-for (const size of FONT_TEXT_SIZE) {
-  const source = vars.font.text.sizes[size]
-
-  _responsiveRule(primitive, `input-${size}`, {
-    [varNames.input.fontSize]: source.fontSize,
-    [varNames.input.lineHeight]: source.lineHeight,
-    [varNames.input.letterSpacing]: source.letterSpacing,
-    [varNames.input.ascenderHeight]: source.ascenderHeight,
-    [varNames.input.descenderHeight]: source.descenderHeight,
-  })
-}
-
-for (const space of SPACE) {
-  _responsiveRule(primitive, `input-p-${space}`, {
-    [varNames.input.padding]: vars.space[space],
-  })
-}
-
-for (const space of SPACE) {
-  _responsiveRule(primitive, `input-g-${space}`, {
-    [varNames.input.gap]: vars.space[space],
-  })
-}
-
-export const _inputStyle: Style = {layers: {primitive}}

package/src/css/primitives/_selectable/_selectable.style.ts

@@ -1,129 +0,0 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-
-import {varNames, vars} from '../../theme'
-import type {Properties, Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.selectable': {
-    'backgroundColor': vars.color.bg,
-    'color': vars.color.fg,
-
-    [varNames.color.bg]: vars.color.tinted.bg[0],
-    [varNames.color.border]: vars.color.tinted.border[2],
-    [varNames.color.fg]: vars.color.tinted.fg[2],
-
-    'nest': {
-      'button&': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        outline: 'none',
-        font: 'inherit',
-        textAlign: 'inherit',
-        border: 0,
-        // @ts-expect-error - TODO: fix this
-        width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-      },
-
-      'a&': {
-        outline: 'none',
-        textDecoration: 'none',
-      },
-
-      ...buildSelectableTones(),
-    },
-
-    '@media': {
-      '(hover: hover)': {
-        nest: {
-          '&:not([data-disabled])': {
-            cursor: 'pointer',
-          },
-
-          '&:not([data-disabled]):hover': {
-            [varNames.color.bg]: vars.color.tinted.bg[1],
-            [varNames.color.border]: vars.color.tinted.border[3],
-            [varNames.color.fg]: vars.color.tinted.fg[1],
-            [varNames.color.muted.bg]: vars.color.tinted.bg[2],
-            [varNames.color.muted.fg]: vars.color.tinted.fg[4],
-          },
-
-          '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
-            {
-              [varNames.color.bg]: vars.color.tinted.bg[2],
-              [varNames.color.border]: vars.color.tinted.border[4],
-              [varNames.color.fg]: vars.color.tinted.fg[0],
-              [varNames.color.muted.bg]: vars.color.tinted.bg[3],
-              [varNames.color.muted.fg]: vars.color.tinted.fg[4],
-            },
-
-          '&:not([data-disabled]):focus': {
-            [varNames.color.bg]: vars.color.solid.primary.bg[0],
-            [varNames.color.border]: vars.color.solid.primary.border[1],
-            [varNames.color.fg]: vars.color.solid.primary.fg[0],
-            [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
-            [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
-          },
-
-          '&[data-disabled]': {
-            [varNames.color.bg]: vars.color.tinted.bg[0],
-            [varNames.color.border]: vars.color.tinted.border[1],
-            [varNames.color.fg]: vars.color.tinted.border[4],
-            [varNames.color.muted.bg]: vars.color.tinted.bg[1],
-            [varNames.color.muted.fg]: vars.color.tinted.border[4],
-          },
-        },
-      },
-    },
-  },
-}
-
-export const _selectableStyle: Style = {layers: {primitive}}
-
-function buildSelectableTones(): Record<string, Properties> {
-  const rules: Record<string, Properties> = {}
-
-  for (const tone of THEME_COLOR_STATE_TONES) {
-    const target = varNames.color
-    const source = vars.color
-
-    rules[`&.${tone}`] = {
-      [target.tinted.bg[0]]: source.tinted[tone].bg[0],
-      [target.tinted.bg[1]]: source.tinted[tone].bg[1],
-      [target.tinted.bg[2]]: source.tinted[tone].bg[2],
-      [target.tinted.bg[3]]: source.tinted[tone].bg[3],
-      [target.tinted.bg[4]]: source.tinted[tone].bg[4],
-
-      [target.tinted.border[0]]: source.tinted[tone].border[0],
-      [target.tinted.border[1]]: source.tinted[tone].border[1],
-      [target.tinted.border[2]]: source.tinted[tone].border[2],
-      [target.tinted.border[3]]: source.tinted[tone].border[3],
-      [target.tinted.border[4]]: source.tinted[tone].border[4],
-
-      [target.tinted.fg[0]]: source.tinted[tone].fg[0],
-      [target.tinted.fg[1]]: source.tinted[tone].fg[1],
-      [target.tinted.fg[2]]: source.tinted[tone].fg[2],
-      [target.tinted.fg[3]]: source.tinted[tone].fg[3],
-      [target.tinted.fg[4]]: source.tinted[tone].fg[4],
-
-      [target.solid.bg[0]]: source.solid[tone].bg[0],
-      [target.solid.bg[1]]: source.solid[tone].bg[1],
-      [target.solid.bg[2]]: source.solid[tone].bg[2],
-      [target.solid.bg[3]]: source.solid[tone].bg[3],
-      [target.solid.bg[4]]: source.solid[tone].bg[4],
-
-      [target.solid.border[0]]: source.solid[tone].border[0],
-      [target.solid.border[1]]: source.solid[tone].border[1],
-      [target.solid.border[2]]: source.solid[tone].border[2],
-      [target.solid.border[3]]: source.solid[tone].border[3],
-      [target.solid.border[4]]: source.solid[tone].border[4],
-
-      [target.solid.fg[0]]: source.solid[tone].fg[0],
-      [target.solid.fg[1]]: source.solid[tone].fg[1],
-      [target.solid.fg[2]]: source.solid[tone].fg[2],
-      [target.solid.fg[3]]: source.solid[tone].fg[3],
-      [target.solid.fg[4]]: source.solid[tone].fg[4],
-    }
-  }
-
-  return rules
-}

package/src/css/primitives/avatar/avatar.style.ts

@@ -1,171 +0,0 @@
-import {AVATAR_COLORS, AVATAR_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {varNames, vars} from '../../theme'
-import type {Properties, Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.avatar': {
-    [varNames.color.fg]: vars.color.avatar.fg,
-
-    backgroundColor: vars.color.avatar.bg,
-    position: 'relative',
-    boxSizing: 'border-box',
-    userSelect: 'none',
-    boxShadow: `0 0 0 1px ${vars.color.bg}`,
-    lineHeight: 0,
-
-    width: vars.avatar.size,
-    height: vars.avatar.size,
-    borderRadius: vars.avatar.size,
-
-    nest: {
-      'button&': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        margin: 0,
-        padding: 0,
-        border: 0,
-        font: 'inherit',
-        color: 'inherit',
-        outline: 'none',
-      },
-
-      'button&:focus': {
-        outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
-        outlineOffset: vars.avatar.focusRing.offset,
-      },
-
-      'button&:focus:not(:focus-visible)': {
-        boxShadow: 'none',
-      },
-
-      ':disabled &, [data-disabled] &': {
-        [varNames.color.avatar.bg]: vars.color.border,
-        [varNames.color.avatar.fg]: vars.color.bg,
-      },
-
-      ...AVATAR_COLORS.reduce(
-        (acc, color) => {
-          return {
-            ...acc,
-            [`&.${color}`]: {
-              [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
-              [varNames.color.avatar.fg]: vars.color.avatar[color].fg,
-            },
-          }
-        },
-        {} as Record<string, Properties>,
-      ),
-    },
-  },
-
-  '.avatar-arrow': {
-    position: 'absolute',
-    boxSizing: 'border-box',
-    zIndex: 0,
-    opacity: 0,
-    transition: 'all 0.2s linear',
-    transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-
-    nest: {
-      '& > svg': {
-        display: 'block',
-        width: '11px',
-        height: '7px',
-        position: 'absolute',
-        top: '-5px',
-        left: '50%',
-        transform: 'translateX(-6px)',
-      },
-
-      '[data-arrow-position="inside"] > &': {
-        transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-        opacity: 0,
-      },
-
-      '[data-arrow-position="top"] > &': {
-        opacity: 1,
-        transform: 'rotate(0deg)',
-      },
-
-      '[data-arrow-position="bottom"] > &': {
-        opacity: 1,
-        transform: 'rotate(-180deg)',
-      },
-    },
-  },
-
-  '.avatar-image': {
-    nest: {
-      '& > img': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-      },
-
-      '& > span': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-        boxShadow: [
-          `inset 0 0 0 1px ${vars.color.avatar.bg}`,
-          `inset 0 0 0 1.75px ${vars.color.bg}`,
-        ].join(', '),
-      },
-
-      '[data-image-error] &': {
-        display: 'none',
-      },
-    },
-  },
-
-  '.avatar-initials': {
-    color: vars.color.avatar.fg,
-    borderRadius: vars.avatar.size,
-  },
-
-  '.avatar-counter': {
-    color: vars.color.fg,
-    backgroundColor: vars.color.bg,
-    boxShadow: [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
-    userSelect: 'none',
-    borderRadius: vars.avatar.size,
-    height: vars.avatar.size,
-
-    nest: {
-      '&&': {
-        minWidth: vars.avatar.size,
-      },
-
-      '[data-hide-inner-stroke] &': {
-        boxShadow: `0 0 0 1px ${vars.color.bg}`,
-      },
-    },
-  },
-
-  '.avatar-stack': {
-    nest: {
-      '& > div + div': {
-        marginLeft: vars.avatar.distance,
-      },
-    },
-  },
-}
-
-for (const size of AVATAR_SIZE) {
-  _responsiveRule(primitive, `avatar-${size}`, {
-    [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-    [varNames.avatar.size]: vars.avatar.sizes[size].size,
-  })
-}
-
-export const avatarStyle: Style = {layers: {primitive}}

package/src/css/primitives/badge/badge.style.ts

@@ -1,21 +0,0 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-
-import {varNames, vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.badge': {
-    backgroundColor: vars.color.bg,
-    color: vars.color.fg,
-    verticalAlign: 'top',
-  },
-}
-
-for (const tone of THEME_COLOR_STATE_TONES) {
-  primitive[`.badge-${tone}`] = {
-    [varNames.color.bg]: vars.color.tinted[tone].bg[4],
-    [varNames.color.fg]: vars.color.tinted[tone].fg[3],
-  }
-}
-
-export const badgeStyle: Style = {layers: {primitive}}

package/src/css/primitives/box/box.style.ts

@@ -1,22 +0,0 @@
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.box': {
-    nest: {
-      'iframe&': {
-        border: 'none',
-      },
-
-      'ul&, ol&': {
-        listStyle: 'none',
-      },
-
-      '&.muted': {
-        backgroundColor: vars.color.muted.bg,
-      },
-    },
-  },
-}
-
-export const boxStyle: Style = {layers: {primitive}}