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

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

@@ -1,178 +0,0 @@
-import {varNames, vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.checkbox': {
-    position: 'relative',
-
-    nest: {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-  },
-
-  '.checkbox-input': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    outline: 'none',
-    opacity: 0,
-    zIndex: 1,
-    padding: 0,
-    margin: 0,
-
-    nest: {
-      '& + span': {
-        position: 'relative',
-        display: 'block',
-        width: vars.input.checkbox.size,
-        height: vars.input.checkbox.size,
-        boxSizing: 'border-box',
-        borderRadius: vars.radius[2],
-        lineHeight: 1,
-        backgroundColor: vars.color.input.checkbox.bg,
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.checkbox.border}`,
-        color: vars.color.input.checkbox.fg,
-
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
-          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
-          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
-        },
-      },
-
-      '& + span > svg': {
-        display: 'block',
-        position: 'absolute',
-        opacity: 0,
-        height: '100%',
-        width: '100%',
-      },
-
-      '& + span > svg > path': {
-        vectorEffect: 'non-scaling-stroke',
-        strokeWidth: '1.5px !important',
-      },
-
-      // show checkmark when checked
-      '&:checked + span > svg:first-child': {
-        opacity: 1,
-      },
-
-      // show minus when indeterminate
-      '&:indeterminate + span > svg:last-child': {
-        opacity: 1,
-      },
-
-      // checked, not disabled, not invalid
-      '&:checked:not(:disabled):not([data-invalid]) + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.solid.default.bg[0],
-          [varNames.color.input.checkbox.border]: vars.color.solid.default.bg[0],
-          [varNames.color.input.checkbox.fg]: vars.color.solid.default.fg[0],
-        },
-      },
-
-      // not checked, not invalid, hovered
-      '&:not(:checked):not([data-invalid]):hover + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
-          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[4],
-          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
-        },
-      },
-
-      // not checked, not disabled, invalid
-      '&:not(:checked):not(:disabled)[data-invalid] + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.critical.bg[1],
-          [varNames.color.input.checkbox.border]: vars.color.tinted.critical.border[3],
-          [varNames.color.input.checkbox.fg]: vars.color.tinted.critical.fg[4],
-        },
-      },
-
-      // not checked, invalid, hovered
-      '&:not(:checked)[data-invalid]:hover + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.critical.bg[2],
-          [varNames.color.input.checkbox.border]: vars.color.tinted.critical.border[4],
-          [varNames.color.input.checkbox.fg]: vars.color.tinted.critical.fg[1],
-          // [varNames.color.input.checkbox.border]: vars.color.focusRing,
-        },
-      },
-
-      // checked, not disabled, invalid
-      '&:checked:not(:disabled)[data-invalid] + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.solid.critical.bg[0],
-          [varNames.color.input.checkbox.border]: vars.color.solid.critical.bg[0],
-          [varNames.color.input.checkbox.fg]: vars.color.solid.critical.fg[0],
-        },
-      },
-
-      // not checked, not indeterminate, read only
-      '&:not(:checked):not(:indeterminate)[data-read-only] + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
-          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
-          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0],
-        },
-      },
-
-      // checked, read only
-      '&:checked[data-read-only] + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
-        },
-      },
-
-      // not checked, focused
-      '&:not(:checked):focus:focus-visible + span': {
-        vars: {
-          [varNames.color.input.checkbox.border]: vars.color.focusRing,
-        },
-      },
-
-      // checked, focused
-      '&:checked:focus:focus-visible + span': {
-        vars: {
-          [varNames.color.input.checkbox.border]: vars.color.focusRing,
-          [varNames.color.input.checkbox.bg]: vars.color.focusRing,
-          [varNames.color.input.checkbox.fg]: vars.color.solid.default.fg[0],
-        },
-      },
-
-      // not checked, disabled
-      '&:not(:checked):disabled + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
-          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[0],
-          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.border[2],
-        },
-      },
-
-      // checked, disabled
-      '&:checked:disabled + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.border[2],
-          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
-          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.bg[0],
-        },
-      },
-
-      // indeterminate, disabled
-      '&:indeterminate:disabled + span': {
-        vars: {
-          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
-          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[0],
-          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.border[2],
-        },
-      },
-    },
-  },
-}
-
-export const checkboxStyle: Style = {layers: {primitive}}

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

@@ -1,61 +0,0 @@
-import {FONT_CODE_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {varNames, vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.code': {
-    vars: {
-      [varNames.font.weight.regular]: vars.font.code.weight.regular,
-      [varNames.font.weight.medium]: vars.font.code.weight.medium,
-      [varNames.font.weight.semibold]: vars.font.code.weight.semibold,
-      [varNames.font.weight.bold]: vars.font.code.weight.bold,
-
-      [varNames.font.family]: vars.font.code.family,
-      [varNames.font.featureSettings]: vars.font.code.featureSettings,
-    },
-
-    color: vars.color.code.fg,
-
-    nest: {
-      '& > code': {
-        fontFamily: 'inherit',
-      },
-
-      '& a': {
-        color: vars.color.link.fg,
-        textDecoration: 'none',
-        borderRadius: '1px',
-      },
-
-      '& svg': {
-        // Some popular CSS libraries change the defaults for SVG display
-        // Make sure SVGs are rendered as inline elements
-        display: 'inline',
-      },
-
-      '& [data-sanity-icon]': {
-        verticalAlign: 'baseline',
-      },
-    },
-  },
-}
-
-for (const size of FONT_CODE_SIZE) {
-  const v = vars.font.code.sizes[size]
-
-  _responsiveRule(primitive, `code-${size}`, {
-    vars: {
-      [varNames.font.fontSize]: v.fontSize,
-      [varNames.font.lineHeight]: v.lineHeight,
-      [varNames.font.letterSpacing]: v.letterSpacing,
-      [varNames.font.iconSize]: v.iconSize,
-      [varNames.font.ascenderHeight]: v.ascenderHeight,
-      [varNames.font.descenderHeight]: v.descenderHeight,
-      [varNames.font.customIconSize]: v.customIconSize,
-    },
-  })
-}
-
-export const codeStyle: Style = {layers: {primitive}}

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

@@ -1,10 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.container': {
-    margin: '0 auto',
-    width: '100%',
-  },
-}
-
-export const containerStyle: Style = {layers: {primitive}}

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

@@ -1,56 +0,0 @@
-import {FONT_HEADING_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {varNames, vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.heading': {
-    vars: {
-      [varNames.font.weight.regular]: vars.font.heading.weight.regular,
-      [varNames.font.weight.medium]: vars.font.heading.weight.medium,
-      [varNames.font.weight.semibold]: vars.font.heading.weight.semibold,
-      [varNames.font.weight.bold]: vars.font.heading.weight.bold,
-
-      [varNames.font.family]: vars.font.heading.family,
-      [varNames.font.featureSettings]: vars.font.heading.featureSettings,
-    },
-
-    color: vars.color.fg,
-
-    nest: {
-      '& a': {
-        color: vars.color.link.fg,
-        textDecoration: 'none',
-      },
-
-      '& a:hover': {
-        color: 'inherit',
-      },
-    },
-  },
-
-  '.heading-muted': {
-    vars: {
-      [varNames.color.fg]: vars.color.muted.fg,
-    },
-  },
-}
-
-for (const size of FONT_HEADING_SIZE) {
-  const v = vars.font.heading.sizes[size]
-
-  _responsiveRule(primitive, `heading-${size}`, {
-    vars: {
-      [varNames.font.fontSize]: v.fontSize,
-      [varNames.font.lineHeight]: v.lineHeight,
-      [varNames.font.letterSpacing]: v.letterSpacing,
-      [varNames.font.iconSize]: v.iconSize,
-      [varNames.font.ascenderHeight]: v.ascenderHeight,
-      [varNames.font.descenderHeight]: v.descenderHeight,
-      [varNames.font.customIconSize]: v.customIconSize,
-    },
-  })
-}
-
-export const headingStyle: Style = {layers: {primitive}}

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

@@ -1,19 +0,0 @@
-import {vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.kbd': {
-    boxShadow: `inset 0 0 0 0.5px ${vars.color.border}`,
-    backgroundColor: vars.color.muted.bg,
-    font: 'inherit',
-    verticalAlign: 'top',
-
-    nest: {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-    },
-  },
-}
-
-export const kbdStyle: Style = {layers: {primitive}}

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

@@ -1,52 +0,0 @@
-import {FONT_LABEL_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {varNames, vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.label': {
-    vars: {
-      [varNames.font.weight.regular]: vars.font.label.weight.regular,
-      [varNames.font.weight.medium]: vars.font.label.weight.medium,
-      [varNames.font.weight.semibold]: vars.font.label.weight.semibold,
-      [varNames.font.weight.bold]: vars.font.label.weight.bold,
-
-      [varNames.font.family]: vars.font.label.family,
-      [varNames.font.featureSettings]: vars.font.label.featureSettings,
-    },
-
-    color: vars.color.fg,
-    textTransform: 'uppercase',
-
-    nest: {
-      '& a': {
-        color: vars.color.link.fg,
-        textDecoration: 'none',
-      },
-    },
-  },
-
-  '.label-muted': {
-    [varNames.color.fg]: vars.color.muted.fg,
-  },
-}
-
-for (const size of FONT_LABEL_SIZE) {
-  const k = varNames.font
-  const v = vars.font.label.sizes[size]
-
-  _responsiveRule(primitive, `label-${size}`, {
-    vars: {
-      [k.fontSize]: v.fontSize,
-      [k.lineHeight]: v.lineHeight,
-      [k.letterSpacing]: v.letterSpacing,
-      [k.iconSize]: v.iconSize,
-      [k.ascenderHeight]: v.ascenderHeight,
-      [k.descenderHeight]: v.descenderHeight,
-      [k.customIconSize]: v.customIconSize,
-    },
-  })
-}
-
-export const labelStyle: Style = {layers: {primitive}}

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

@@ -1,9 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {}
-
-export const popoverStyle: Style = {
-  layers: {
-    primitive,
-  },
-}

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

@@ -1,84 +0,0 @@
-import {varNames, vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.radio': {
-    position: 'relative',
-
-    nest: {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-
-      '& input': {
-        appearance: 'none',
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        opacity: '0',
-        height: '100%',
-        width: '100%',
-        outline: 'none',
-        zIndex: '1',
-        padding: '0',
-        margin: '0',
-        borderRadius: '9999px',
-        border: 'none',
-      },
-
-      // enabled
-      '& > input + span': {
-        display: 'block',
-        position: 'relative',
-        width: vars.input.radio.size,
-        height: vars.input.radio.size,
-        borderRadius: '9999px',
-        backgroundColor: vars.color.input.radio.bg,
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.radio.border}`,
-
-        vars: {
-          [varNames.color.input.radio.fg]: vars.color.tinted.default.fg[0],
-          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[0],
-          [varNames.color.input.radio.border]: vars.color.tinted.default.border[1],
-        },
-      },
-
-      '& > input + span::after': {
-        content: '""',
-        position: 'absolute',
-        top: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
-        left: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
-        width: vars.input.radio.markSize,
-        height: vars.input.radio.markSize,
-        backgroundColor: vars.color.input.radio.fg,
-        borderRadius: '9999px',
-        opacity: 0,
-      },
-
-      // hovered
-      '& > input:not(:disabled):hover + span': {
-        vars: {
-          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[1],
-          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2],
-        },
-      },
-
-      // focused
-      '& > input:not(:disabled):focus + span': {
-        vars: {
-          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2],
-        },
-      },
-
-      '& > input:checked + span::after': {
-        opacity: 1,
-      },
-    },
-  },
-}
-
-export const radioStyle: Style = {
-  layers: {
-    primitive,
-  },
-}

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

@@ -1,24 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.select': {
-    nest: {
-      '& > select:disabled': {
-        opacity: 1,
-      },
-    },
-  },
-
-  '.select-presentation': {
-    nest: {
-      '& > span': {
-        // place icon to the right
-        position: 'absolute',
-        top: 0,
-        right: 0,
-      },
-    },
-  },
-}
-
-export const selectStyle: Style = {layers: {primitive}}

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

@@ -1,22 +0,0 @@
-import type {Style, StyleKeyframes, StyleRules} from '../../types'
-
-const keyframes: StyleKeyframes = {
-  'spinner-rotate': {
-    from: {
-      transform: 'rotate(0deg)',
-    },
-    to: {
-      transform: 'rotate(360deg)',
-    },
-  },
-}
-
-const primitive: StyleRules = {
-  '.spinner': {},
-
-  '.animated-spinner-icon': {
-    animation: 'spinner-rotate 500ms linear infinite',
-  },
-}
-
-export const spinnerStyle: Style = {keyframes, layers: {primitive}}

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

@@ -1,13 +0,0 @@
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.stack': {
-    gridTemplateColumns: 'minmax(0, 1fr)',
-  },
-}
-
-export const stackStyle: Style = {
-  layers: {
-    primitive,
-  },
-}

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

@@ -1,102 +0,0 @@
-import {varNames, vars} from '../../theme'
-import type {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.switch': {},
-
-  '.switch-element': {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    opacity: 0,
-    height: '100%',
-    width: '100%',
-    outline: 'none',
-    padding: 0,
-    margin: 0,
-
-    // place the input element on top of the representation element
-    zIndex: 1,
-  },
-
-  '.switch-presentation': {
-    vars: {
-      [varNames.color.input.switch.bg]: vars.color.tinted.default.border[2],
-      [varNames.color.input.switch.fg]: vars.color.tinted.default.bg[0],
-      [varNames.input.switch.thumb.offset]: '0',
-      [varNames.input.switch.thumb.size]:
-        `calc(${vars.input.switch.height} - ${vars.input.switch.padding} * 2)`,
-    },
-    display: 'block',
-    position: 'relative',
-    width: vars.input.switch.width,
-    height: vars.input.switch.height,
-    borderRadius: `calc(${vars.input.switch.height} / 2)`,
-    outlineOffset: vars.input.switch.focusRing.offset,
-
-    // Make sure it’s not possible to interact with the presentation element
-    pointerEvents: 'none',
-
-    nest: {
-      'input:not(:checked):hover + &': {
-        vars: {
-          [varNames.color.input.switch.bg]: vars.color.tinted.default.border[4],
-        },
-      },
-
-      'input:checked + &': {
-        vars: {
-          [varNames.color.input.switch.bg]: vars.color.solid.default.bg[0],
-          [varNames.color.input.switch.fg]: vars.color.solid.default.fg[0],
-          [varNames.input.switch.thumb.offset]:
-            `calc(${vars.input.switch.width} - (${vars.input.switch.padding} * 2) - ${vars.input.switch.thumb.size})`,
-        },
-      },
-
-      '[data-indeterminate] > input + &': {
-        vars: {
-          [varNames.input.switch.thumb.offset]:
-            `calc(${vars.input.switch.width} / 2 - ${vars.input.switch.thumb.size} / 2 - ${vars.input.switch.padding})`,
-        },
-      },
-
-      'input:focus + &': {
-        outline: `${vars.input.switch.focusRing.width} solid ${vars.color.focusRing}`,
-      },
-
-      'input:focus:not(:focus-visible) + &': {
-        outline: 'none',
-      },
-    },
-  },
-
-  '.switch-track': {
-    display: 'block',
-    backgroundColor: vars.color.input.switch.bg,
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: 'inherit',
-    transition: `box-shadow, background-color ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
-  },
-
-  '.switch-thumb': {
-    display: 'block',
-    position: 'absolute',
-    left: vars.input.switch.padding,
-    top: vars.input.switch.padding,
-    width: vars.input.switch.thumb.size,
-    height: vars.input.switch.thumb.size,
-    backgroundColor: vars.color.input.switch.fg,
-    borderRadius: '9999px',
-    boxShadow: `0 0 0 0.5px ${vars.color.shadow.umbra}, 0 0.5px 2px 0.5px ${vars.color.shadow.umbra}`,
-    transform: `translate3d(${vars.input.switch.thumb.offset}, 0, 0)`,
-    transition: `transform ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
-  },
-}
-
-export const switchStyle: Style = {layers: {primitive}}