@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,270 +0,0 @@
-import {
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_SCHEMES,
-  THEME_COLOR_STATE_TONES,
-} from '@sanity/ui/theme'
-
-import {ColorCardVarNames, ColorCardVars, Properties, Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-import {toneMap} from './_constants'
-
-const primitive: StyleRules = {
-  '.card': {
-    'backgroundColor': vars.color.bg,
-    'color': vars.color.fg,
-
-    [varNames.color.bg]: vars.color.tinted.default.bg[0],
-    [varNames.color.border]: vars.color.tinted.default.border[1],
-    [varNames.color.code.bg]: vars.color.code.bg,
-    [varNames.color.code.fg]: vars.color.code.fg,
-    [varNames.color.fg]: vars.color.tinted.default.fg[0],
-    [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
-    [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
-
-    '@nest': {
-      'button&': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        outline: 'none',
-        font: 'inherit',
-        textAlign: 'inherit',
-        border: 'none',
-        // @ts-expect-error - TODO: fix
-        width: ['-moz-available', '-webkit-fill-available', 'fill-available'],
-      },
-
-      'a&': {
-        // border: 'none',
-        outline: 'none',
-        textDecoration: 'none',
-      },
-
-      'pre&': {
-        font: 'inherit',
-        whiteSpace: 'inherit',
-      },
-
-      'a&:not([data-disabled]):hover, button&:not([data-disabled]):hover': {
-        [varNames.color.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.border]: vars.color.tinted.default.border[3],
-        [varNames.color.fg]: vars.color.tinted.default.fg[1],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
-      },
-
-      'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
-      },
-
-      // toggle button
-      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
-        {
-          [varNames.color.bg]: vars.color.tinted.default.bg[2],
-          [varNames.color.border]: vars.color.tinted.default.border[4],
-          [varNames.color.fg]: vars.color.tinted.default.fg[0],
-          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
-        },
-
-      'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
-      },
-
-      'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
-        [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],
-      },
-
-      // '&:not([data-disabled]):focus': {
-      //   '--color-bg': vars.color.solid.bg[0],
-      //   '--color-border': vars.color.solid.border[1],
-      //   '--color-fg': vars.color.solid.fg[1],
-      //   '--color-muted-bg': vars.color.solid.bg[1],
-      //   '--color-muted-fg': vars.color.solid.fg[3],
-      // },
-
-      'a&[data-disabled]), button&[data-disabled]': {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
-      },
-
-      // '&[data-disabled]': {
-      //   '--color-bg': vars.color.tinted.bg[0],
-      //   '--color-border': vars.color.tinted.border[1],
-      //   '--color-fg': vars.color.tinted.border[4],
-      //   '--color-muted-bg': vars.color.tinted.bg[1],
-      //   '--color-muted-fg': vars.color.tinted.border[4],
-      // },
-    },
-  },
-}
-
-// scope variables to scheme
-for (const scheme of THEME_COLOR_SCHEMES) {
-  const schemeProps: Properties = {
-    colorScheme: scheme,
-  }
-
-  for (const tone of THEME_COLOR_CARD_TONES) {
-    const _varNames = varNames.color[tone]
-    const _vars = vars.color[scheme][tone]
-
-    _assignToneProps(schemeProps, _varNames, _vars)
-  }
-
-  primitive[`.card.${scheme}`] = schemeProps
-}
-
-// scope variables to tone
-for (const tone of THEME_COLOR_CARD_TONES) {
-  const _varNames = varNames.color
-  const _vars = vars.color[tone]
-
-  const toneProps: Properties = {}
-
-  _assignToneProps(toneProps, _varNames, _vars)
-
-  ////////////////////////////////////////////////////////////////////////////////////////////////
-  // Legacy `--card` variables
-  ////////////////////////////////////////////////////////////////////////////////////////////////
-  Object.assign(toneProps, {
-    '--card-bg-color': vars.color.bg,
-    '--card-bg2-color': vars.color.muted.bg,
-    '--card-border-color': vars.color.border,
-    '--card-code-bg-color': vars.color.code.bg,
-    '--card-code-fg-color': vars.color.code.fg,
-    '--card-fg-color': vars.color.fg,
-    '--card-focus-ring-color': vars.color.focusRing,
-    '--card-hairline-soft-color': vars.color.tinted.default.border[1],
-    '--card-hairline-hard-color': vars.color.tinted.default.border[2],
-    '--card-icon-color': vars.color.fg,
-    '--card-kbd-bg-color': vars.color.muted.bg,
-    '--card-kbd-border-color': vars.color.tinted.default.border[1],
-    '--card-kbd-fg-color': vars.color.muted.fg,
-    '--card-link-color': vars.color.link.fg,
-    '--card-link-fg-color': vars.color.link.fg,
-    '--card-muted-bg-color': vars.color.muted.bg,
-    '--card-muted-fg-color': vars.color.muted.fg,
-    '--card-shadow-outline-color': vars.color.shadow.outline,
-    '--card-shadow-umbra-color': vars.color.shadow.umbra,
-    '--card-shadow-penumbra-color': vars.color.shadow.penumbra,
-    '--card-shadow-ambient-color': vars.color.shadow.ambient,
-    // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
-    // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-  })
-
-  primitive[`.card.${toneMap[tone]}`] = toneProps
-}
-
-export const cardStyle: Style = {layers: {primitive}}
-
-function _assignToneProps(
-  toneProps: Properties,
-  _varNames: ColorCardVarNames,
-  _vars: ColorCardVars,
-) {
-  Object.assign(toneProps, {
-    [_varNames.accent.fg]: _vars.accent.fg,
-  })
-
-  for (const hue of THEME_COLOR_AVATAR_COLORS) {
-    toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg
-    toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg
-  }
-
-  Object.assign(toneProps, {
-    [_varNames.backdrop]: _vars.backdrop,
-
-    [_varNames.code.fg]: _vars.code.fg,
-    [_varNames.code.bg]: _vars.code.bg,
-
-    [_varNames.code.token.atrule]: _vars.code.token.atrule,
-    [_varNames.code.token.attrName]: _vars.code.token.attrName,
-    [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
-    [_varNames.code.token.attribute]: _vars.code.token.attribute,
-    [_varNames.code.token.boolean]: _vars.code.token.boolean,
-    [_varNames.code.token.builtin]: _vars.code.token.builtin,
-    [_varNames.code.token.cdata]: _vars.code.token.cdata,
-    [_varNames.code.token.char]: _vars.code.token.char,
-    [_varNames.code.token.class]: _vars.code.token.class,
-    [_varNames.code.token.className]: _vars.code.token.className,
-    [_varNames.code.token.comment]: _vars.code.token.comment,
-    [_varNames.code.token.constant]: _vars.code.token.constant,
-    [_varNames.code.token.deleted]: _vars.code.token.deleted,
-    [_varNames.code.token.doctype]: _vars.code.token.doctype,
-    [_varNames.code.token.entity]: _vars.code.token.entity,
-    [_varNames.code.token.function]: _vars.code.token.function,
-    [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
-    [_varNames.code.token.id]: _vars.code.token.id,
-    [_varNames.code.token.important]: _vars.code.token.important,
-    [_varNames.code.token.inserted]: _vars.code.token.inserted,
-    [_varNames.code.token.keyword]: _vars.code.token.keyword,
-    [_varNames.code.token.number]: _vars.code.token.number,
-    [_varNames.code.token.operator]: _vars.code.token.operator,
-    [_varNames.code.token.prolog]: _vars.code.token.prolog,
-    [_varNames.code.token.property]: _vars.code.token.property,
-    [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
-    [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
-    [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
-    [_varNames.code.token.regex]: _vars.code.token.regex,
-    [_varNames.code.token.selector]: _vars.code.token.selector,
-    [_varNames.code.token.string]: _vars.code.token.string,
-    [_varNames.code.token.symbol]: _vars.code.token.symbol,
-    [_varNames.code.token.tag]: _vars.code.token.tag,
-    [_varNames.code.token.unit]: _vars.code.token.unit,
-    [_varNames.code.token.url]: _vars.code.token.url,
-    [_varNames.code.token.variable]: _vars.code.token.variable,
-
-    [_varNames.focusRing]: _vars.focusRing,
-
-    [_varNames.link.fg]: _vars.link.fg,
-
-    [_varNames.shadow.outline]: _vars.shadow.outline,
-    [_varNames.shadow.umbra]: _vars.shadow.umbra,
-    [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
-    [_varNames.shadow.ambient]: _vars.shadow.ambient,
-  })
-
-  for (const variant of ['solid', 'tinted'] as const) {
-    for (const elementTone of THEME_COLOR_STATE_TONES) {
-      const __varNames = _varNames[variant][elementTone]
-      const __vars = _vars[variant][elementTone]
-
-      Object.assign(toneProps, {
-        [__varNames.bg[0]]: __vars.bg[0],
-        [__varNames.bg[1]]: __vars.bg[1],
-        [__varNames.bg[2]]: __vars.bg[2],
-        [__varNames.bg[3]]: __vars.bg[3],
-        [__varNames.bg[4]]: __vars.bg[4],
-
-        [__varNames.border[0]]: __vars.border[0],
-        [__varNames.border[1]]: __vars.border[1],
-        [__varNames.border[2]]: __vars.border[2],
-        [__varNames.border[3]]: __vars.border[3],
-        [__varNames.border[4]]: __vars.border[4],
-
-        [__varNames.fg[0]]: __vars.fg[0],
-        [__varNames.fg[1]]: __vars.fg[1],
-        [__varNames.fg[2]]: __vars.fg[2],
-        [__varNames.fg[3]]: __vars.fg[3],
-        [__varNames.fg[4]]: __vars.fg[4],
-      })
-    }
-  }
-}

package/src/css/primitives/card/card.ts

@@ -1,14 +0,0 @@
-import {_comp} from '../../_comp'
-import {shadow} from '../../aspects'
-import {toneMap} from './_constants'
-import {CardStyleProps} from './types'
-
-export function card(props: CardStyleProps): string | undefined {
-  return _comp(
-    props.scheme,
-    toneMap[props.tone ?? 'default'],
-    'card',
-    props.checkered && 'card-checkered',
-    shadow(props),
-  )
-}

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

@@ -1,10 +0,0 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-
-import {ShadowStyleProps} from '../../aspects'
-import {BoxStyleProps} from '../box'
-
-export interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
-  checkered?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey | 'inherit'
-}

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

@@ -1,129 +0,0 @@
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {css} from '../../../core/lib/styled'
-// import {rem, ThemeProps} from '../../../core/styles'
-// import {focusRingBorderStyle, focusRingStyle} from '../../../core/styles/internal'
-
-// export function checkboxBaseStyles(): ReturnType<typeof css> {
-//   return css`
-//     position: relative;
-//     display: inline-block;
-//   `
-// }
-
-// export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-//   const {color, input, radius} = getTheme_v2(props.theme)
-//   const {focusRing} = input.checkbox
-
-//   return css`
-//     position: absolute;
-//     top: 0;
-//     left: 0;
-//     width: 100%;
-//     height: 100%;
-//     outline: none;
-//     opacity: 0;
-//     z-index: 1;
-//     padding: 0;
-//     margin: 0;
-
-//     & + span {
-//       position: relative;
-//       display: block;
-//       height: ${rem(input.checkbox.size)};
-//       width: ${rem(input.checkbox.size)};
-//       box-sizing: border-box;
-//       box-shadow: ${focusRingBorderStyle({
-//         color: color.input.default.enabled.border,
-//         width: input.border.width,
-//       })};
-//       border-radius: ${rem(radius[2])};
-//       line-height: 1;
-//       background-color: ${color.input.default.enabled.bg};
-
-//       & > svg {
-//         display: block;
-//         position: absolute;
-//         opacity: 0;
-//         height: 100%;
-//         width: 100%;
-
-//         & > path {
-//           vector-effect: non-scaling-stroke;
-//           stroke-width: 1.5px !important;
-//         }
-//       }
-//     }
-
-//     &:checked + span {
-//       background: ${color.input.default.enabled.fg};
-//       box-shadow: ${focusRingBorderStyle({
-//         color: color.input.default.enabled.fg,
-//         width: input.border.width,
-//       })};
-//       color: ${color.input.default.enabled.bg};
-//     }
-
-//     /* focus */
-//     &:not(:disabled):focus:focus-visible + span {
-//       box-shadow: ${focusRingStyle({focusRing})};
-//     }
-
-//     /* focus when checked - uses a different offset */
-//     &:not(:disabled):focus:focus-visible&:checked + span {
-//       box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
-//     }
-
-//     &[data-error] + span {
-//       background-color: ${color.input.invalid.enabled.border};
-//       box-shadow: ${focusRingBorderStyle({
-//         width: input.border.width,
-//         color: color.input.invalid.enabled.muted.bg,
-//       })};
-//       color: ${color.input.default.disabled.fg};
-//     }
-//     &[data-error]&:checked + span {
-//       background-color: ${color.input.invalid.enabled.muted.bg};
-//       color: ${color.input.default.enabled.bg};
-//     }
-//     &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
-//       box-shadow: ${focusRingStyle({
-//         border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-//         focusRing: {width: 1, offset: 1},
-//       })};
-//     }
-
-//     &:disabled + span {
-//       background-color: ${color.input.default.disabled.bg};
-//       box-shadow: ${focusRingBorderStyle({
-//         width: input.border.width,
-//         color: color.input.default.disabled.border,
-//       })};
-//       color: ${color.input.default.disabled.fg};
-//     }
-//     &:disabled&:checked + span {
-//       background-color: ${color.input.default.disabled.muted.bg};
-//     }
-
-//     &[data-read-only] + span {
-//       background-color: ${color.input.default.readOnly.bg};
-//       box-shadow: ${focusRingBorderStyle({
-//         width: input.border.width,
-//         color: color.input.default.readOnly.border,
-//       })};
-//       color: ${color.input.default.readOnly.fg};
-//     }
-
-//     &[data-read-only]&:checked + span {
-//       background-color: ${color.input.default.readOnly.muted.bg};
-//     }
-
-//     &:checked + span > svg:first-child {
-//       opacity: 1;
-//     }
-//     &:indeterminate + span > svg:last-child {
-//       opacity: 1;
-//     }
-//   `
-// }
-
-export {}

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

@@ -1,154 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.checkbox': {
-    position: 'relative',
-    display: 'inline-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': `var(--input-checkbox-size)`,
-        'height': `var(--input-checkbox-size)`,
-        'boxSizing': 'border-box',
-        'borderRadius': `var(--radius-2)`,
-        'lineHeight': 1,
-        'backgroundColor': `var(--color-checkbox-bg)`,
-        'boxShadow': `inset 0 0 0 1px var(--color-checkbox-border)`,
-        'color': `var(--color-checkbox-fg)`,
-
-        // '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
-        // '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
-        // '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
-
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-0)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-1)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
-
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })},
-      },
-
-      '& + span > svg': {
-        display: 'block',
-        position: 'absolute',
-        opacity: 0,
-        height: '100%',
-        width: '100%',
-      },
-
-      '& + span > svg > path': {
-        vectorEffect: 'non-scaling-stroke',
-        strokeWidth: '1.5px !important',
-      },
-
-      '&:hover + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
-      },
-
-      '&:checked + span': {
-        '--color-checkbox-bg': 'var(--color-solid-default-bg-0)',
-        '--color-checkbox-border': 'var(--color-solid-default-bg-0)',
-        '--color-checkbox-fg': 'var(--color-solid-default-fg-0)',
-        // '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
-        // '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
-        // '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.fg,
-        //   width: input.border.width,
-        // })},
-      },
-
-      '&:checked + span > svg:first-child': {
-        opacity: 1,
-      },
-
-      // focus
-      '&:not(:disabled):focus:focus-visible + span': {
-        // box-shadow: ${focusRingStyle({focusRing})},
-      },
-
-      // focus when checked - uses a different offset
-      '&:not(:disabled):focus:focus-visible&:checked + span': {
-        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
-      },
-
-      '&[data-error] + span': {
-        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-border)',
-        '--color-checkbox-border': 'var(--color-input-invalid-enabled-bg)',
-        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-fg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.invalid.enabled.muted.bg,
-        // })},
-      },
-
-      '&[data-error]:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-muted-bg)',
-        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-bg)',
-      },
-
-      '&[data-error]:checked:not(:disabled):focus:focus-visible + span': {
-        '--color-checkbox-border': 'var(--color-input-invalid-readOnly-muted-bg)',
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        //   focusRing: {width: 1, offset: 1},
-        // })},
-      },
-
-      '&:disabled + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-0)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-border-2)',
-      },
-
-      '&:checked:disabled + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-bg-0)',
-      },
-
-      // '&:disabled:checked + span': {
-      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
-      // },
-
-      '&[data-read-only] + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-readOnly-bg)',
-        '--color-checkbox-border': 'var(--color-input-default-readOnly-border)',
-        '--color-checkbox-fg': 'var(--color-input-default-readOnly-fg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.default.readOnly.border,
-        // })},
-      },
-
-      '&[data-read-only]:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-readOnly-muted-bg)',
-      },
-
-      '&:indeterminate + span > svg:last-child': {
-        opacity: 1,
-      },
-    },
-  },
-}
-
-export const checkboxStyle: Style = {layers: {primitive}}

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

@@ -1,9 +0,0 @@
-import {_comp} from '../../_comp'
-
-export function checkbox(): string | undefined {
-  return _comp('checkbox')
-}
-
-export function checkboxInput(): string | undefined {
-  return _comp('checkbox-input')
-}